<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>筛选列表</span>
      </div>
      <div class="text item">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="姓名：" prop="studentName">
            <el-input
              v-model="queryParams.studentName"
              placeholder="请输入姓名"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="身份证号：" prop="sfzNum">
            <el-input
              v-model="queryParams.sfzNum"
              placeholder="请输入身份证号"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="准考证号：" prop="zkzNum">
            <el-input
              v-model="queryParams.zkzNum"
              placeholder="请输入准考证号"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="换考位：" prop="e_status">
            <el-select
              v-model="queryParams.e_status"
              placeholder="请选择考位状态"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in eStatusList"
                :key="index"
                :label="item.dictLabel"
                :value="Number(item.dictValue)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="优生：" prop="eugenicsNum">
            <el-input
              v-model="queryParams.eugenicsNum"
              placeholder="请输入优生排名"
              clearable
              @input="((value)=>{inputValue(value,'eugenicsNum')})"
              size="small"
            />
          </el-form-item>
          <el-form-item label="差生：" prop="unfortunatelyNum">
            <el-input
              v-model="queryParams.unfortunatelyNum"
              placeholder="请输入差生排名"
              clearable
              @input="((value)=>{inputValue(value,'unfortunatelyNum')})"
              size="small"
            />
          </el-form-item>
          <el-form-item label="抽验状态：" prop="spotCheckStatus">
            <el-select
              v-model="queryParams.spotCheckStatus"
              placeholder="请选择抽验状态"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in checkStatusList"
                :key="index"
                :label="item.dictLabel"
                :value="Number(item.dictValue)"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
            >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>渲染列表</span>
      </div>
      <div class="text item">
        <el-table
          v-loading="loading"
          :data="tableList"
        >
          <el-table-column label="排名" align="center" prop="rank" />
          <el-table-column label="考生姓名" align="center" prop="studentName" />
          <el-table-column label="身份证号" align="center" prop="sfzNum" />
          <el-table-column label="准考证号" align="center" prop="zkzNum" />
          <el-table-column label="换考位" align="center" width="100" :formatter="eStatusFormat" />
          <el-table-column label="总分" align="center" prop="score" />
          <el-table-column label="算分答案" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="handleView(scope.row, true)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="MQ答案" align="center" :formatter="mqStatusFormat">
            <template slot-scope="scope">
              <el-button
                type="text"
                :style="`color:${scope.row.mqStatus==0?'red':'#1890ff'}`"
                @click="handleView(scope.row, false)">
                {{mqStatusFormat(scope.row)}}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column label="抽验状态" align="center" :formatter="checkStatusFormat">
            <template slot-scope="scope">
              <el-switch
                v-show="scope.row.spotCheckStatus==0"
                v-model="scope.row.spotCheckStatus"
                active-value="1"
                inactive-value="0"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
              <span v-show="scope.row.spotCheckStatus==1">{{checkStatusFormat(scope.row)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>

    <!-- 查看每个科目的答案来源、答案状态对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      :close-on-click-modal="true"
      :before-close="closeDialog"
      append-to-body
    >
      <el-table v-loading="dialogLoading" :data="tableDialog" height="219" style="width: 100%">
        <el-table-column label="科目" align="center" prop="subjectName" />
        <el-table-column v-if="showType" label="算分答案" align="center" :formatter="anStatusFormat" />
        <el-table-column v-if="!showType" label="答案状态" align="center" :formatter="mqStatusFormat" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    querySpotCheckAnswerTotal,
    queryAnswerSource,
    updateSpotCheckStatus
  } from "@/api/toolsystem/grade";

  export default {
    name: "totalAswList",
    props:{
      anStatusList: Array,// 算分答案状态列表
      eStatusList: Array,// 考位状态列表
      mqStatusList: Array, // MQ答案状态列表
      checkStatusList: Array,// 抽验状态列表
    },
    data() {
      return {
        // 遮罩层
        loading: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          studentName: null,
          sfzNum: null,
          zkzNum: null,
          e_status: null, // 考位状态
          eugenicsNum: null, // 优生排名
          unfortunatelyNum: null, // 差生排名
          spotCheckStatus: null // 抽验状态
        },
        // anStatusList: [],// 算分答案状态列表
        // eStatusList: [],// 考位状态列表
        // mqStatusList: [], // MQ答案状态列表
        // checkStatusList: [],// 抽验状态列表
        total: 0,// 总条数
        // 标签配置表格数据
        tableList: [],
        open: false,// 控制dialog弹框显示与隐藏
        tableDialog: [],// dialog弹框数据
        dialogLoading: false,// dialog弹框数据加载
        title: '',// dialog弹框的title
        showType: true,// 控制 算分答案/答案状态 显示与隐藏
      };
    },
    created() {},
    methods: {
      // 控制优生/差生输入框输入值
      inputValue(value, type){
        if(value.length == 1){
          this.queryParams[type] = value.replace(/[^1-9]/g,'')
        }else if(value.length > 1) {
          this.queryParams[type] = value.replace(/[^\d]/g,'')
        }
      },
      // 切换核验状态：已核验/未核验
      handleStatusChange(row) {
        this.$confirm('确认要标记为已抽验吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let obj = {
              zkzNum: row.zkzNum,
              spotCheckStatus: row.spotCheckStatus,
              e_status: row.e_status,
            }
            updateSpotCheckStatus(obj)
              .then(response => {
                if (response.code != 200) {
                  row.spotCheckStatus = row.spotCheckStatus == 0 ? "1" : "0";
                  return this.msgError(response.msg)
                };
                this.msgSuccess(response.msg);
                this.getList();
              })
              .catch(error => {
                row.spotCheckStatus = row.spotCheckStatus == 0 ? "1" : "0";
                console.log(error);
              });
          })
          .catch(() => {
            row.spotCheckStatus = row.spotCheckStatus == 0 ? "1" : "0";
            this.msgInfo("取消操作");
          });
      },
      // 获取查看的答案来源列表
      getAnswerSource(zkzNum){
        this.dialogLoading = true
        queryAnswerSource({zkz_num:zkzNum})
          .then(response => {
            if (response.code != 200) {
              this.dialogLoading = false
              return this.msgError(response.msg);
            }
            this.tableDialog = response.data;
            this.dialogLoading = false
          })
          .catch(error => {
            this.dialogLoading = false
            console.log(error);
          });
      },
      // 关闭dialog弹框
      closeDialog(){
        this.open = false;
        this.tableDialog = [];
      },
      // 查看/MQ答案按钮操作
      handleView(row, type){
        this.showType = type
        if(type){
          this.title = '答案来源'
        }else{
          this.title = '答案状态'
        }
        this.open = true
        this.getAnswerSource(row.zkzNum)
      },
      // 算分状态字典翻译
      anStatusFormat(row, column) {
        return this.selectDictLabel(this.anStatusList, row.answerSource);
      },
      // 考位状态字典翻译
      eStatusFormat(row, column) {
        return this.selectDictLabel(this.eStatusList, row.e_status);
      },
      // MQ答案状态字典翻译
      mqStatusFormat(row, column) {
        return this.selectDictLabel(this.mqStatusList, row.mqStatus);
      },
      // 抽验状态字典翻译
      checkStatusFormat(row, column) {
        return this.selectDictLabel(this.checkStatusList, row.spotCheckStatus);
      },
      // 筛选表单重置
      resetQuery() {
        this.$refs["queryForm"].resetFields()
        this.getList();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 查询标签配置列表 */
      getList() {
        this.loading = true;
        querySpotCheckAnswerTotal(this.queryParams)
          .then(response => {
            console.log(response)
            if (response.code != 200) {
              this.loading = false;
              return this.msgError(response.msg);
            }
            this.tableList = response.rows;
            this.tableList.forEach(item=>{
              item.spotCheckStatus=item.spotCheckStatus.toString()
            })
            this.total = response.total;
            this.loading = false;
          })
          .catch(error => {
            this.loading = false;
            console.log(error);
          });
      },
    }
  };
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
</style>

